<template>
  <div>
    <el-dialog
      width="700px"
      custom-class="pre-dialog"
      title="增加订单"
      :visible.sync="visible"
    >
      <div>
        <div class="order-id">订单编号:123456</div>
        <el-row class="common" type="flex">
          <el-col :offset="1">
            <div style="font-size:15px;color: #182236;">客订 30吨</div>
            <div style="font-size:14px;margin-top:8px;color: #182236">
              品种：R65/T35 50S 紧赛纺16
            </div>
          </el-col>
          <el-col class="time" :offset="4">
            <div style="margin-bottom:8px">下单时间：2021/10/12</div>
            <div>订单交期要求：2021/10/16</div>
          </el-col>
        </el-row>
        <el-form>
          <el-row type="flex" justify="space-between" :gutter="20">
            <el-col :span="8">
              <el-form-item label="增加订单量（吨）">
                <el-input size="small" type="text"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单计划车间">
                <el-input size="small" type="text"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="订单交期">
                <el-input size="small" type="text"></el-input>
              </el-form-item>
            </el-col>
          </el-row>
          <el-row type="flex" justify="space-between" :gutter="20">
            <el-col :span="8">
              <el-form-item label="订单开始日期">
                <el-input size="small" type="text"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8">
              <el-form-item label="预计完成日期">
                <el-input size="small" type="text"></el-input>
              </el-form-item>
            </el-col>
            <el-col :span="8"></el-col>
          </el-row>
        </el-form>
        <div class="btn-list">
          <el-button>取消</el-button>
          <el-button type="primary">确定</el-button>
        </div>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      visible: false
    };
  },
  methods: {
    edit(record) {
      console.log(record);
      this.visible = true;
    }
  }
};
</script>

<style></style>
